<template>
  <div>
    <!-- 首页商品展示页 -->
    <router-view></router-view>
    <!-- 首页底部栏 -->
    <nut-tabbar
      @tabSwitch="tabSwitch"
      class="word"
      v-model:visible='active'
    >
      <nut-tabbar-item
        to="/home/homeindex"
        tab-title="首页"
        :img="imgList[0]"
        :activeImg="imgList[1]"
      ></nut-tabbar-item>
      <nut-tabbar-item
        to="/home/homesort"
        tab-title="分类"
        :img="imgList[2]"
        :activeImg="imgList[3]"
      ></nut-tabbar-item>
      <nut-tabbar-item
        tab-title="发现"
        :img="imgList[4]"
        :activeImg="imgList[5]"
      ></nut-tabbar-item>
      <nut-tabbar-item
        to="/home/shoppingCart"
        tab-title="购物车"
        :img="imgList[6]"
        :activeImg="imgList[7]"
      ></nut-tabbar-item>
      <nut-tabbar-item
        to="/home/homemine"
        tab-title="我的"
        :img="imgList[8]"
        :activeImg="imgList[9]"
      ></nut-tabbar-item>
    </nut-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgList: [
        //   在webpack未识别到静态资源被依赖的情况下，需要使用 require 来手动告诉 webpack，这个资源需要打包。
        require('@/assets/iconfont/shouye.svg'),
        require('@/assets/iconfont/shouyeP.svg'),
        require('@/assets/iconfont/fenlei.svg'),
        require('@/assets/iconfont/fenleiP.svg'),
        require('@/assets/iconfont/xiaoxi.svg'),
        require('@/assets/iconfont/xiaoxiP.svg'),
        require('@/assets/iconfont/gouwu.svg'),
        require('@/assets/iconfont/gouwuP.svg'),
        require('@/assets/iconfont/wode.svg'),
        require('@/assets/iconfont/wodeP.svg'),
      ],
      active: 0
    }
  },
  methods: {
    tabSwitch (data, index) {
      sessionStorage.setItem('index', index)
    }
  },
  created () {
    if (sessionStorage.getItem('index')) {
      this.active = sessionStorage.getItem('index')
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep div.nut-tabbar-item {
  color: #c1ab96;
}
::v-deep [data-v-b23aaf84] .nut-tabbar-item__icon--unactive {
  color: #000;
}
.word {
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.word {
  position: fixed;
  z-index: 999;
  bottom: 0;
}
</style>